<template>
    <orh-table reload  @on-reload="reload" add="add" @on-add="moralAdd" del="del" @on-del="delConfirm" pages :pageDate="pageDate" @on-page-change="reload">
        
        <Table border stripe :columns="columns" @on-selection-change="selectOne" :data="data" :loading="tableload" slot="table"></Table>

        <orh-sidebar v-model="show" :title="titles" scale slot="others" 
            :add="content == 'PushData'?true:false" @on-add="pushAdd"
            :del="content == 'PushData'?true:false" @on-del="pushdelsubmit">
            <component :is="content" :condition="condition" @requery="requery" @delPush="delPush"></component>
        </orh-sidebar>.

        <Modal v-model="pushState" title="添加推送" :width="400" slot="others">
            
            <Form ref="form" :model="form" :rules="ruleValidate" label-position="left" :label-width="100">

                <FormItem label="选择部门" prop="datas">
                    <Cascader v-model="form.datas" filterable :data="userdata" @on-change="yonghuData" :load-data="loadData"></Cascader>
                </FormItem>

                <FormItem label="用户" prop="user_id">
                    <Select v-model="form.user_id" multiple placeholder="请选择用户">
                        <Option v-for="(item,index) in userList" :value="item.id" :key="index">{{ item.teacher.teacher_name.zh }}</Option>
                    </Select>
                </FormItem>

            </Form>

            <Button type="primary" slot="footer" :loading="butload" @click="handleSubmit('form')">添加</Button>

        </Modal>

    </orh-table>
</template>
                
<script>

export default {
    name: 'dutymodule-adminitem',
    components: {
        PushData: resolve => {require(['./PushData.vue'], resolve);},
        Operation: resolve => {require(['./Operation.vue'], resolve);}
    },
    data () {
        return {
            pushState: false,
            butload: false,
            show: false,
            content: null,
            titles: null,
            tableload:false,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            form: {
                user_id: [],
                department_id: null,
                department_position_id: null,
                administrativeduty_id: null,
                datas: []
            },
            
            userdata: [],
            userList: [],
            url1: 'api/user/v1/get/all/department/list',
            url2: 'api/user/v1/get/position/list?department_id=',
            url3: 'api/user/v1/get/position/users?position_id=',
            addsurl: 'api/watchlist/v1/administrativedutyuser/add',

            data:[],
            columns:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '行政值班项名称',
                    minWidth: 150,
                    align: 'center',
                    render:(h,params)=>{
                        let name = params.row.administrativeduty_name.zh?params.row.administrativeduty_name.zh:params.row.administrativeduty_name.mn;
                        return h('div',name)
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'push',
                                    }
                                ],
                                props: {
                                    type: 'success',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.pushsData(params.row.administrativeduty_id)
                                    },
                                },
                            }, '推送'),
                            h('Button', {
                                directives: [
                                    {
                                        name: 'button',
                                        value: 'edit',
                                    }
                                ],
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    click: () => {
                                        this.updata(params.row.administrativeduty_id)
                                    },
                                },
                            }, '修改'),
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: '您确定要删除这条数据吗?',
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.administrativeduty_id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ]),
                        ]);
                    }
                },
            ],
            url: 'api/watchlist/v1/administrativeduty/list',
            delUrl: 'api/watchlist/v1/administrativeduty/del/',
            delPushUrl: 'api/watchlist/v1/administrativedutyuser/del/',
            del: [],
            condition: null,
            
            ruleValidate: {
                user_id: [
                    { required: true, type: 'array' , message: '请选择用户', trigger: 'change' }
                ],
                datas: [
                    { required: true, type: 'array', message: '请选择部门岗位', trigger: 'change' }
                ]
            },
            delVlaue: [],
        }
    },

    methods: {
        
        /************************************************************
         * 
         * 添加推送
         * 
         ************************************************************/
        pushAdd () {
            this.pushState = true
        },
        
        /************************************************************
         * 
         * 表单验证
         * @param   {name}            要验证的表单
         * 
         ************************************************************/
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.butload = true
                    this.pushAddSubmit ()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        pushAddSubmit () {
            let datas = JSON.parse(JSON.stringify(this.form))
            datas.department_id = datas.datas[0]
            datas.department_position_id = datas.datas[1]

            delete datas.datas

            this.$http.post(this.addsurl, datas).then(val=>{
                this.butload = false
                this.show = false
                this.pushState = false
            }).catch(err => {
                this.butload = false
                this.pushState = false
            })
        },
        
        /************************************************************
         * 
         * 批量删除推送
         * 
         ************************************************************/
        pushdelsubmit () {
            if (this.delVlaue.length) {
                this.$Modal.confirm({
                    title: '删除确认',
                    closable: true,
                    loading: true,
                    content: '您确定要删除这些数据吗?',
                    onOk: () => {
                        let datas = JSON.stringify(this.delVlaue)
                        this.$http.delete(this.delPushUrl + datas).then(val=>{
                            this.$Modal.remove ()
                            this.show = false
                            this.delVlaue = []
                        }).catch(err => {
                            this.$Modal.remove ()
                            this.delVlaue = []
                        })
                    }
                })
            }
        },
        
        /************************************************************
         * 
         * 批量删除推送
         * @param   {data}            数据id
         * 
         ************************************************************/
        delPush (data) {
            this.delVlaue = data
        },
        
        /************************************************************
         * 
         * 删除确认
         * 
         ************************************************************/
        delConfirm () {
            if (this.del.length) {
                this.$Modal.confirm({
                    title: '删除确认',
                    closable: true,
                    loading: true,
                    content: '您确定要删除这些数据吗?',
                    onOk: () => {
                        this.delSubmit ()
                    }
                })
            }
        },
        
        /************************************************************
         * 
         * 添加数据
         * 
         ************************************************************/
        moralAdd () {
            this.condition = false
            this.titles = '添加数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 单条数据删除
         * @param   {index}            当前数据id
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(index)
            this.delSubmit()
        },
        
        /************************************************************
         * 
         * 修改数据
         * @param   {index}            当前数据id
         * 
         ************************************************************/
        updata (index) {
            this.condition = index
            this.titles = '修改数据'
            this.show = true
            this.content = 'Operation'
        },
        
        /************************************************************
         * 
         * 推送数据
         * @param   {index}            当前数据id
         * 
         ************************************************************/
        pushsData (index) {
            this.form.administrativeduty_id = index
            this.condition = index
            this.titles = '推送数据'
            this.show = true
            this.content = 'PushData'
        },
        
        /************************************************************
         * 
         * 批量删除数据
         * @param   {index}            所选数据id[array]
         * 
         ************************************************************/
        selectOne (index) {
            this.del = []
            index.forEach(item => {
                this.del.push(item.administrativeduty_id)
            });
        },
        
        /************************************************************
         * 
         * 删除操作
         * 
         ************************************************************/
        delSubmit () {
            if(this.del.length == 0){
                this.$Message.info('请选择删除项')
                this.prompt = false
                return
            }
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl + this.del).then(val=>{
                this.$Modal.remove ()
                this.reload (this.pageDate.current_page)
            }).catch(err => {
                this.$Modal.remove ()
            })
        },
        
        /************************************************************
         * 
         * 添加，修改数据成功后关闭组件并刷新数据
         * @param   {state}            状态
         * 
         ************************************************************/
        requery (state) {
            if(state){
                this.show = false
                this.reload (this.pageDate.current_page)
            }
        },
        
        /************************************************************
         * 
         * 刷新数据
         * @param   {index}            分页
         * 
         ************************************************************/
        reload (index) {
            this.data = []
            this.tableload = true
            this.queryData(index?index:1)
        },
        
        /************************************************************
         * 
         * 列表数据
         * @param   {index}             分页
         * 
         ************************************************************/
        queryData (index) {
            this.tableload = true;
            let params = {
                page: index
            }
            this.$http.get(this.url, { params }).then(val=>{
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
                this.data = val.data 
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        },
        
        /************************************************************
         * 
         * 级联选择（部门）
         * 
         ************************************************************/
        departmentData () {
            this.$http.get(this.url1).then(val=>{
                this.userdata = val.data.map(el => {
                    let obj ={
                        value: el.id,
                        label: el.department_name.zh?el.department_name.zh:el.department_name.mn,
                        children: [],
                        loading:false
                    }
                    return obj
                })
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 级联选择（岗位）
         * 
         ************************************************************/
        loadData (item, callback) {
            item.loading = true
            this.$http.get(`${this.url2}[${item.value}]`).then(val=>{
                item.children = val.data.map(el => {
                    let obj ={
                        value: el.id,
                        label: el.position_name.zh?el.position_name.zh:el.position_name.mn
                    }
                    return obj
                })
                item.loading = false
                callback();
            }).catch(err => {
                item.loading = false
            })
        },
        
        /************************************************************
         * 
         * 级联选择（用户）
         * 
         ************************************************************/
        yonghuData (item) {
            this.form.user_id = []
            this.$http.get(`${this.url3}[${item[1]}]`).then(val=>{
                this.userList = val.data
            }).catch(err => {
            })
        },
    },
    created () {
        this.reload (1)
        this.departmentData ()
    },
}
</script>